<template>
  <MrCustom bg-color="bg-gradual-blue" is-back>

  </MrCustom>
  <view class="bg-white" style="min-height: 80vh">
    <view class=" bg-gradual-blue shadow-warp  padding">
      <view v-if="archiveList.length===0" class="flex flex-sub justify-between align-center">
        <view>
          <MrAvatar></MrAvatar>
        </view>
        <view class="flex flex-sub flex-direction padding">
          <view class="text-xl">微信用户</view>
          <view class="text-lg">完善个人信息</view>
        </view>
        <view>
          <navigator url="/pages/common/archive/create">
            <button class="cu-btn cuIcon-add  round lg"></button>
          </navigator>
        </view>
      </view>
      <view @click.stop="edit(archiveInfo)" v-else-if="archiveInfo"
            class="  flex flex-sub justify-between align-center ">
        <view>
          <MrAvatar :size="100" :src="archiveInfo.photo"></MrAvatar>
        </view>
        <view class="flex flex-sub flex-direction padding">
          <view>
            <text class="text-black text-bold">{{ archiveInfo.realName }}</text>
            <text class="margin-left-xs cu-tag text-lg bg-blue light">{{ archiveInfo.relationship }}</text>
          </view>
          <view class="text-lg">
            <text>{{ archiveInfo.sex }}</text>
            <text class="padding-left">{{ myMoment().diff(archiveInfo.birth, 'years') }}岁</text>
          </view>
        </view>
        <view>
          <navigator v-if="archiveList.length===1" url="/pages/common/archive/create">
            <view class="cuIcon-add text-blue text-xxl"></view>
          </navigator>
          <view v-else>
            <view @click.stop="handleShow" class="cuIcon-order  text-xxl"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="margin bg-gradual-orange shadow radius-lg padding">
      <view class="flex flex-sub  radius-lg flex-direction padding-tb">
        <view class="flex flex-sub justify-between align-center text-xl margin-bottom">
          <view class="flex flex-sub align-center">
            <view class="text-xxl">健康史</view>

            <view v-if="archiveInfo&&archiveInfo.sex==='男'" class="margin-left">
              完成度{{ (process / (numList.length - 1) * 100).toFixed(0) }}%
            </view>
            <view v-else class="margin-left"> 完成度{{ (process / numList.length * 100).toFixed(0) }}%</view>
          </view>
          <view @click="toHealth">
            <text v-if="process">去完善</text>
            <text v-else>去建立</text>
            <text class="cuIcon-right"></text>
          </view>
        </view>
        <view class="text-df">记录健康史 ，就诊时帮助医生确定病因</view>
      </view>
    </view>
    <view class="margin">
      <view class="flex justify-between">
        <view @click="toWeight"
              class="flex flex-sub bg-gradual-green shadow radius-lg margin-right-xs padding flex-direction">
          <view class="flex flex-sub justify-between align-center text-xl margin-bottom">
            <view class="text-xxl">体重指数</view>
            <view class="cuIcon-right"></view>
          </view>
          <view>
            <view v-if="!archiveInfo||!archiveInfo.height||!archiveInfo.weight" class="text-df">监控身体健康情况</view>
            <view v-else>
              <text class="text-xxl text-bold">
                {{ getBMI(archiveInfo.height, archiveInfo.weight) }}
              </text>
              <text class="text-df">BMI</text>
              <text class="text-red  padding-left-xs">
                {{ getBMIStatus(getBMI(archiveInfo.height, archiveInfo.weight)) }}
              </text>
            </view>
          </view>
        </view>
        <view @click="toBlood"
              class="flex flex-sub bg-gradual-purple shadow radius-lg margin-left-xs  padding flex-direction">
          <view class="flex flex-sub justify-between align-center text-xl margin-bottom">
            <view class="text-xxl">血压</view>
            <view class="cuIcon-right"></view>
          </view>
          <view v-if="!archiveInfo||(archiveInfo&&!archiveInfo.bloodPressureHigh)" class="text-df">常检测风险早知道</view>
          <view v-else-if="archiveInfo">
            <text class="text-xxl text-bold ">
              {{ archiveInfo.bloodPressureHigh }}
            </text>
            <text>/</text>
            <text class="text-xxl text-bold ">
              {{ archiveInfo.bloodPressureLow }}
            </text>
            <text class="text-df">mmHg</text>
          </view>
        </view>
      </view>
    </view>
    <view class="shadow bg-white margin radius-lg">
      <view class="cu-bar">
        <view class="action">
          <text class="cuIcon-titles "></text>
          <text class="text-xl text-bold">看科普</text>
        </view>
        <view class="action">
          <navigator url="/pages/common/article/list">
            <text class="text-lg text-gray">
              更多
              <text class="cuIcon-right"></text>
            </text>
          </navigator>
        </view>
      </view>
      <HomeArticle></HomeArticle>
    </view>

  </view>
  <uni-popup ref="popup" background-color="#fff">
    <view class="cu-bar bg-white">
      <view class="action">选择成员</view>
      <view class="action">
        <button class="cu-btn cuIcon-add bg-blue light" @click="create">添加成员</button>
      </view>
    </view>
    <view style="height: 150px" class="radius">
      <z-paging ref="pagingRef" :fixed="false" v-model="archiveList">
        <view class="item" v-for="(item,index) in archiveList" :key="index" @click="select(index)">
          <view class="flex flex-sub align-center justify-between solid padding">
            <MrAvatar :size="48" :src="item.photo"></MrAvatar>
            <view class="flex flex-sub">{{ item.realName }}</view>
            <view class="text-blue" @click="edit(item)">编辑</view>
          </view>
        </view>
      </z-paging>
    </view>
  </uni-popup>

</template>

<script setup lang="ts">

import MrCustom from "@/components/common/MrCustom.vue";
import MrAvatar from "@/components/common/MrAvatar.vue";
import {ref} from "vue";
import api from "@/api";
import {onShow} from "@dcloudio/uni-app";
import myMoment from "@/utils/common/myMoment";
import {getBMI, getBMIStatus} from "@/utils";
import HomeArticle from "@/pages/user/home/components/HomeArticle.vue";


onShow(() => {
  getArchiveList()
})

const archiveList = ref([])
const archiveInfo = ref(null)
const popup = ref()
const numList = ref([
  {
    name: '既往史',
    desc: '既往史是指一个人既往的健康状况的记录',
    progress: 0,
    value: [
      {
        key: 'pastDisease',
        title: '慢性病史或其他病史',
        desc: '您是否患有重症疾病或其他慢性疾病?',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
      {
        key: 'pastOperation',
        title: '手术史',
        desc: '您是否有手术史？',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
      {
        key: 'pastInfectiousDisease',
        title: '传染病史',
        desc: '您是有传染病史？',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
      {
        key: 'pastBloodTransfusion',
        title: '输血史',
        desc: '您是否曾接受过输血？',
        options: [
          {
            label: '是',
            value: '是',
            isInput: false,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
      {
        key: 'pastVaccines',
        title: '疫苗史',
        desc: '您接种过哪些疫苗？',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
    ],

  },
  {
    name: '个人史',
    desc: '个人史是对生活习惯等健康问题的记录',
    progress: 0,
    value: [
      {
        key: 'personalOccupation',
        title: '职业',
        desc: '您目前的职业状况是?',
        options: [
          {
            label: '在业',
            value: '',
            isInput: true,
          },
          {
            label: '无业/失业',
            value: '无业/失业',
            isInput: false,
          }]
      },
      {
        key: 'personalSmoke',
        title: '吸烟史',
        desc: '您是否有吸烟的习惯?',
        options: [
          {
            label: '是',
            value: '是',
            isInput: false,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          },
          {
            label: '已戒烟',
            value: '已戒烟',
            isInput: false,
          }]
      },
      {
        key: 'personalDrink',
        title: '饮酒史',
        desc: '您是否有饮酒的习惯?',
        options: [
          {
            label: '是',
            value: '是',
            isInput: false,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          },
          {
            label: '已戒酒',
            value: '已戒酒',
            isInput: false,
          }]
      },
    ]
  },
  {
    name: '家族史',
    desc: '家族史是指某些疾病在家族成员中发病情况',
    progress: 0,
    value: [
      {
        key: 'familyDisease',
        title: '家族史',
        desc: '您是否有家人有重症病或慢性疾病病史',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
    ]
  },
  {
    name: '婚育史',
    desc: '婚育史是指一个人结婚与生育等相关信息',
    progress: 0,
    value: [
      {
        key: 'marriage',
        title: '婚姻史',
        desc: '你的婚姻状况是？',
        options: [
          {
            label: '已婚',
            value: '已婚',
            isInput: false,
          },
          {
            label: '未婚',
            value: '未婚',
            isInput: false,
          }]
      },
      {
        key: 'childbirth',
        title: '生育史',
        desc: '您是否有孕育史？',
        options: [
          {
            label: '是',
            value: '是',
            isInput: false,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },

    ]
  },
  {
    name: '过敏史',
    desc: '过敏史是指一个人对某些过敏原过敏的情况',
    progress: 0,
    value: [
      {
        key: 'allergyFood',
        title: '食物过敏史',
        desc: '您是否有食物过敏史？',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
      {
        key: 'allergyMedicine',
        title: '药物过敏史',
        desc: '您是否有药物过敏史？',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
      {
        key: 'allergyContact',
        title: '接触过敏史',
        desc: '您是否有接触过敏史 ？',
        options: [
          {
            label: '是',
            value: '',
            isInput: true,
          },
          {
            label: '否',
            value: '否',
            isInput: false,
          }]
      },
    ]
  },
  {
    name: '月经史',
    desc: '月经史是指妇女行经的相关情况',
    progress: 0,
    value: [
      {
        key: 'mensesFirstYear',
        title: '月经初潮',
        desc: '您第一次来月经是几岁？',
        options: [
          {
            label: '填写',
            value: '',
            isInput: true,
          }
        ]
      },
      {
        key: 'mensesLastDate',
        title: '上次月经日期',
        desc: '您上次月经是什么时候？',
        options: [
          {
            label: '填写',
            value: '',
            isInput: true,
          }
        ]
      },
      {
        key: 'mensesCycle',
        title: '月经周期',
        desc: '您的月经隔多久来？',
        options: [
          {
            label: '填写',
            value: '',
            isInput: true,
          }
        ]
      },
      {
        key: 'mensesDayNum',
        title: '经期天数',
        desc: '您的经期持续几天？',
        options: [
          {
            label: '填写',
            value: '',
            isInput: true,
          }
        ]
      },
    ],
  }
])
const process = ref(0)


const getProcess = () => {
  console.log(archiveInfo.value)
  if (archiveInfo.value) {
    process.value = 0
    numList.value.forEach(item => {
      let cnt = 0
      item.value.forEach(it => {
        if (archiveInfo.value[it.key] !== null) {
          cnt++
        }
      })
      item.progress = cnt
      if (cnt !== 0) {
        process.value++
      }
    })
  }
}

const getArchiveList = () => {
  let index = uni.getStorageSync("archiveIndex") || 0
  api.archive.list().then(res => {
    if (res && res.data.code === 0) {
      archiveList.value = res.data.data
      if (archiveList.value.length < index) {
        index = 0
        uni.setStorageSync("archiveIndex", index)
      }
      archiveInfo.value = archiveList.value.at(index)
      getProcess()
    }
  })
}

const select = (index: any) => {
  uni.setStorageSync("archiveIndex", index)
  archiveInfo.value = archiveList.value.at(index)
  getProcess()
  handleHide()
}

const handleShow = () => {
  popup.value.open('bottom')
}
const handleHide = () => {
  popup.value.close()
}

const edit = (item: any) => {
  uni.navigateTo({
    url: '/pages/common/archive/edit?archiveInfo=' + encodeURIComponent(JSON.stringify(item)),
  })
}
const create = () => {
  uni.navigateTo({
    url: '/pages/common/archive/create'
  })
}

const toWeight = () => {
  if (archiveInfo.value) {
    uni.navigateTo({
      url: '/pages/common/archive/weight/index?archiveInfo=' + encodeURIComponent(JSON.stringify(archiveInfo.value)),
    })
  }else{
    uni.navigateTo({
      url: '/pages/common/archive/create',
      success:()=>{
        uni.showToast({
          title:'请先建立健康档案',
          icon:'error'
        })
      }
    })
  }

}
const toBlood = () => {
  if (archiveInfo.value) {
    uni.navigateTo({
      url: '/pages/common/archive/blood/index?archiveInfo=' + encodeURIComponent(JSON.stringify(archiveInfo.value)),
    })
  }else{
    uni.navigateTo({
      url: '/pages/common/archive/create',
      success:()=>{
        uni.showToast({
          title:'请先建立健康档案',
          icon:'error'
        })
      }
    })
  }
}
const toHealth = () => {
  if (archiveInfo.value) {
    uni.navigateTo({
      url: '/pages/common/archive/health/index?archiveInfo=' + encodeURIComponent(JSON.stringify(archiveInfo.value)),
    })
  }else{
    uni.navigateTo({
      url: '/pages/common/archive/create',
      success:()=>{
        uni.showToast({
          title:'请先建立健康档案',
          icon:'error'
        })
      }
    })
  }

}
</script>

<style scoped>

</style>